<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>珍奇动物信息</title>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/hfy/css/bootstrap.min.css">
    <!--引入字体图标相关的样式文件-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--引入axios框架-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!--引入VUE框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="/hfy/css/hfy.css">
    <style>

    </style>
</head>
<body class="animal-wrap" style="font-size: 12px;">
    <div class="top1">
        <div class="navbar1 navbar-inverse1">
            <div class="container-fluid1">
                <div class="navbar-header1">
                    <h1 class="logo">
                        <a class="navbar-brand1" href="/">
                            <img src="/hfy/img/img_logo.png" alt="">
                        </a>
                    </h1>
                </div>
                <div class="collapse1 navbar-collapse1" id="main-menu">
                    <ul class="nav1 navbar-nav1">
                        <li class="item1 wat1" style="width: 80px">
                            <a href="/" title="首页">
                                <!--<span class="glyphicon glyphicon-home"></span>-->
<!--                                <span class="glyphicon glyphicon-home" aria-hidden="true"></span>-->
                                <img src="/hfy/img/t_home.png" alt="">
                            </a>
                        </li>
                        <li class="item1">
                            <a href="/views/hfy_zqdw">珍奇动物</a>
                        </li>
                        <li class="item1">
                            <a href="/views/hth_ztly">主题乐园</a>
                        </li>
                        <li class="item1 l-last-item1">
                            <a href="/views/zx_sssj">水上世界</a>
                        </li>
                        <li class="item1">
                            <a href="/views/zzb_bhjy">保护教育</a>
                        </li>
                        <li class="item1">
                            <a href="/views/lfx_ynfg">园内风光</a>
                        </li>
                        <li class="item1">
                            <a href="/views/lfx_ykfw">游客服务</a>
                        </li>
                        <li class="item1 wat1" style="width: 80px">
                            <a href="/search" title="搜索">
                                <!--<i class="icfont ic_search"></i>-->
                                <img src="/hfy/img/t_search.png" alt="">
                            </a>
                        </li>
                    </ul>
                    <a href="" class="btn-nav-close" id="J_btnNavClose">
                        <i class="icon-nav-close"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="banner themePark">
            <div class="title mt100">珍奇动物</div>
            <div class="sub-title mt10">探秘世界珍奇动物王国</div>
        </div>
        <div class="container item-list animal-list clearfix">
            <div class="tabs-bar nav nav-tabs">
                <ul class="tabs subpage-tabs" id="J_AnimalsTab">
                    <li class="col-6 active">
                        <a data-toggle="tab" href="#home">珍奇动物展示</a>
                    </li>
                    <li class="col-6">
                        <a data-toggle="tab" href="#menu1">动物观赏指南</a>
                    </li>
                    <li class="col-6">
                        <a data-toggle="tab" href="#menu2">动物行为展示</a>
                    </li>
                    <li class="col-6">
                        <a data-toggle="tab" href="#menu3">动物趣闻</a>
                    </li>
                    <li class="col-6">
                        <a data-toggle="tab" href="#menu4">动物救助信息</a>
                    </li>
                    <li class="col-6">
                        <a href="/views/zzb_bhjy">科普活动信息导览</a>
                    </li>
                </ul>
            </div>
            <div class="tab-content" id="J_AnimalsTabContent">
                <div class="row tab-content" id="J_AnimalsTab1">
                    <div class="AnimalsCard tab-pane fade in active" id="home" >
                        <div class="item fore1" v-for="rareAnimal in rareAnimals" style="width: 355px">
                            <a :href="'/zoosite/dwRareAnimal/edit/'+rareAnimal.id">
                                <div class="itemImage">
                                    <img :src="rareAnimal.imagePath">
                                </div>
                                <div class="text">
                                    <p class="tit lh20"><span class="name" v-text="rareAnimal.name">【白虎】</span></p>
                                    <p class="description mt20" v-text="rareAnimal.intruduce">学名：Panthera tigris ssp.tigris
                                        (white)，隶属哺乳纲-食肉目-猫科-豹属。国家一级保护动物；
                                        《世界自然保护联盟》（IUCN） 2008年濒危物种红色名录ver
                                        3.1——濒危（EN）
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="AnimalsCard tab-pane fade" id="menu1">
                        <div class="item fore1" v-for="animal in animals" style="width: 355px;height: 430px;margin-bottom: 10px">
                            <a :href="'/zoosite/dwWatchGuide/edit/'+animal.id">
                                <div style="width: 100%;
                                     height: 200px;overflow: hidden;/*超出不显示*/">
                                    <img :src="animal.imagePath">
                                </div>
                                <div class="text">
                                    <p class="tit lh20"><span class="name" v-text="animal.title">熊园</span></p>
                                    <p class="description mt20" v-text="animal.descrip">位于小熊猫馆与中型猛兽管之间，
                                        始建于70年代，是我园年代较为久远的馆舍之一，于2015年翻新升级，以焕然一新的姿态出现在游客面前。
                                        馆舍分南北两区，北区住着棕熊家族，南区住着黑熊家族，更有观赏长廊，可让您近距离观赏熊宝们。
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="AnimalsCard tab-pane fade" id="menu2">
                        <div class="menu2_1">
                            <a href="/zoosite/dwWatchGuide/menu/1">
                                <div class="menu2_1s">
                                    <img src="/hfy/img/252da8e1-b57a-42de-beb3-cf8e9c92402e.jpg"
                                         class="img-responsive">
                                </div>
                                <div class="text menu2_1s">
                                    <p class="tit lh20"><span class="name">陆生动物保护中心</span></p>
                                    <div class="media mt40">
                                        <img src="/hfy/img/d6d0aed3-399d-445a-9421-22db4b708fc2.jpg">
                                        <span class="value value1">
                                            <p>暂不开放</p>
                                        </span>
                                    </div>
                                    <p class="value2">主要展示动物</p>
                                    <p class="value3">大象</p>
                                </div>
                            </a>
                        </div>
                        <div class="menu2_1">
                            <a href="/zoosite/dwWatchGuide/menu/2">
                                <div class="text menu2_1s">
                                    <p class="tit lh20"><span class="name">海洋动物保护中心</span></p>
                                    <div class="media mt40">
                                        <img src="/hfy/img/723b3fb4-9dca-4e17-bb89-a5f0beec21d1.jpg">
                                        <span class="value value1">
                                            <p>第一场<span>11:20</span></p>
                                            <p>第二场<span>15:00</span></p>
                                        </span>
                                    </div>
                                    <p class="value2">主要展示动物</p>
                                    <span class="value3">海豚</span>
                                    <span class="value3">海狮</span>
                                </div>
                                <div class="menu2_1s">
                                    <img src="/hfy/img/70b3e5e7-e48b-49af-b169-d52b11028dde.jpg"
                                         class="img-responsive">
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="AnimalsCard tab-pane fade" id="menu3">
                        <div class="item fore1" v-for="animalNew in animalNews">
                            <a :href="'/zoosite/dwAnimalNews/edit/'+animalNew.id">
                                <div class="menu3_img">
                                    <img :src="animalNew.imagePath">
                                </div>
                                <div class="text">
                                    <p class="tit lh20"><span class="name" v-text="animalNew.title">非洲白狮落户邕城</span></p>
                                    <p class="description mt20" v-text="animalNew.content">为增加园内物种数量，丰富园内动物展示效果，
                                        我园近期从南非引进了一对幼年白狮。 目前两头白狮已于5月24日抵达我园，并在园内的中型猛兽馆安家落户，
                                        欢迎游客前来观赏！
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="AnimalsCard tab-pane fade" id="menu4">
                        <div class="item fore1" v-for="animalRescue in animalRescues" style="height: 500px">
                            <a :href="'/zoosite/dwAnimalRescue/edit/'+animalRescue.id">
                                <div class=" menu4 menu4_img" style="width: 335px;height: 200px;overflow: hidden">
                                    <img :src="animalRescue.imagePath" class="img-responsive">
                                </div>
                                <div class="menu4 menu4_text" style="padding: 30px">
                                    <p class="tit lh20"><span class="name" v-text="animalRescue.title">近期救助动物情况</span></p>
                                    <p class="description mt20" v-text="animalRescue.rescue">5月初，我园接收了两只被救助的小猫头鹰。
                                        猫头鹰是鸮形目（Strigiformes）中各种鸟类的总称，总数超过130余种，全部列入国家二级保护动物，
                                        私自圈养可是违法的哦！猫头鹰在除南极洲以外所有的大洲都有分布。
                                        大部分的种为夜行性肉食性动物,食物以鼠类为主，也吃昆虫、小鸟、蜥蜴、鱼等动物。
                                        该目鸟类头宽大，嘴短而粗壮前端成钩状，头部正面的羽毛排列成面盘，部分种类具有耳状羽毛。
                                    </p>
                                    <p class="description mt20">
                                        如有发现其它需要救助的动物，请联系0771-3214125。
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="well">
            <p>- 联系我们 -</p>
            <img src="/hfy/img/f_logo.png" alt="">
            <p style="margin: 20px">广西壮族自治区南宁市西乡塘区大学东路73号</p>
            <p><span style="margin: 50px 200px 50px 0">动物园</span><span>0771-3213932</span></p>
            <hr width="332">
            <p><span style="margin: 50px 155px 50px 0">加勒比水世界</span><span>0771-3218828</span></p>
            <hr width="332">
            <div style="margin: 10px 20px 0 390px">
                <span>官方微信</span><br>
                <img src="/hfy/img/qr_wechat.png" alt="">
            </div>
            <div>
                <span>官方微博</span><br>
                <img src="/hfy/img/qr_weibo.png" alt="">
            </div>
        </div>
    </footer>
</body>
<script src="/hfy/js/rareanimal.js"></script>
</html>
